<!DOCTYPE html>
<html lang="en" xmlns:height="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>DATA SOURCE MANAGEMENT</title>
    <link rel="stylesheet" type="text/css" href="resources/default/css/common/common.css" />
    <link rel="stylesheet" type="text/css" href="resources/default/css/library.css" />
    <link rel="stylesheet" type="text/css" href="resources/default/css/basic.css">
    <link rel="stylesheet" type="text/css" href="resources/default/css/governance.css">
    <style>
		body{
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
	</style>
</head>
<body>
<header>
        <div class="header-con cf">
            <a class="header-logo" href="../../Analytics/portal.html"></a>
            <!--头部下拉链接
            <div class="top-line"></div>
            <div class="droplist-nav">
                <div class="nav-text cf">
                    <span class="drop-icon"></span>
                    <span class="nav-show">Data Governance</span>
                </div>
                <ul class="nav-link">
				 <a href="/BDPaaS/views/home.html"><li>BD PaaS</li></a>
                    <a href="/Analytics/home.html"><li>Analytics</li></a>
                   	<a href="/BDPaaS/views/cihome.html"><li>Customer Insight</li></a>
                </ul>
            </div>-->
            <div class="header-other center-layer">
                <span class="icon-header icon-header-user"></span>
                <div class="login-filed">
                    <div class="icon-annouce"> </div>
                </div>
                <a class="user-info">
                    <div class="user-name">
                        <span class="username">10011</span>
                        <div class="icon-header icon-help"> </div>
                    </div>
                </a>
            </div>
            <div class="header-nav">
                <ul>
                    <li>
                        <a href="../index1.html">Home</a>
                    </li>
                    <li>
                        <a href="../views/logicalOnly.html">Data Monitoring</a>
                    </li>
                    <li><a href="../poc/poc/poc-data.html">Data Modeling</a></li>
                    <li class="selected"><a href="">Data Integration</a></li>
                </ul>
            </div>
        </div>
</header>
<div class="container">
    <ul class="big-tab cf mt40">
        <a href="dataSource.html">
            <li class="tab-data-icon01">Data Source</li>
        </a>
        <a href="mapping.html">
            <li class="tab-data-icon tab-data-icon02">Schema Mapping </li>
        </a>
        <a href="dataIntergration.html">
            <li class="tab-list-on tab-data-icon tab-data-icon03">Data Integration</li>
        </a>
    </ul>
    <div class="fullScrn" style="margin-top:40px">
    	<div class="opt-bar">
        	<ul>
            	<li class="btn1"></li>
            	<li class="btn2"></li>
            	<li class="btn3"></li>
            	<li class="btn4"></li>
            	<li class="btn5"></li>
            	<li class="btn6"></li>
            	<li class="btn7"></li>
            	<li class="btn8"></li>
            	<li class="btn9"></li>
            	<li class="btn10"></li>
            	<li class="btn11"></li>
            	<li class="btn12"></li>
            	<li class="btn13"></li>
            </ul>
        </div>
        <div class="tool-bar">
        	<ul>
            	<li class="open">
                	<span class="group1"></span>Data Extraction
                	<ul>
                    	<li class="" nodeType="extraction"><span class="tool1"></span><h2>Extract Text</h2></li>
                    	<li class="" nodeType="extraction"><span class="tool2"></span><h2>Extract HDFS</h2></li>
                    	<li class="tool-column-last" nodeType="extraction"><span class="tool3"></span><h2>Extract XML</h2></li>
                    	<li class="" nodeType="extraction"><span class="tool4"></span><h2>Extract HDFSXML</h2></li>
                    	<li class="" nodeType="extraction"><span class="tool5"></span><h2>Extract JDBC</h2></li>
                    	<li class="tool-column-last" nodeType="extraction"><span class="tool6"></span><h2>Extract Oracle</h2></li>
                    	<li class="" nodeType="extraction"><span class="tool7"></span><h2>Extract DB2</h2></li>
                    	<li class="" nodeType="extraction"><span class="tool8"></span><h2>Extract HBase</h2></li>
                    	<li class="tool-column-last" nodeType="extraction"><span class="tool9"></span><h2>Extract Hive</h2></li>
                        <div class="clearB"></div>
                    </ul>
                </li>
            	<li class="open">
                	<span class="group2"></span>Transform
                	<ul>
                    	<li class="hasLink" nodeType="transform"><span class="tool10"></span><h2>Filter</h2></li>
                    	<li class="hasLink" nodeType="transform"><span class="tool11"></span><h2>Group</h2></li>
                    	<li class="tool-column-last" nodeType="transform"><span class="tool12"></span><h2>Lookup</h2></li>
                    	<li class="" nodeType="transform"><span class="tool13"></span><h2>Join</h2></li>
                    	<li class="" nodeType="transform"><span class="tool14"></span><h2>Deduplicate</h2></li>
                    	<li class="tool-column-last" nodeType="transform"><span class="tool15"></span><h2>Route</h2></li>
                    	<li class="" nodeType="transform"><span class="tool16"></span><h2>Merge</h2></li>
                    	<li class="" nodeType="transform"><span class="tool17"></span><h2>Sort</h2></li>
                    	<li class="tool-column-last" nodeType="transform"><span class="tool18"></span><h2>Convert</h2></li>
                    	<li class="" nodeType="transform"><span class="tool19"></span><h2>Union</h2></li>
                    	<li class="" nodeType="transform"><span class="tool20"></span><h2>Column to Row</h2></li>
                    	<li class="tool-column-last" nodeType="transform"><span class="tool21"></span><h2>Append Merge</h2></li>
                        <div class="clearB"></div>
                    </ul>
                </li>
            	<li>
                	<span class="group3"></span>Data Loading
                    <ul></ul>
                </li>
            	<li>
                	<span class="group4"></span>Other
                    <ul></ul>
                </li>
            </ul>
        </div>
        
        <div class="basicAttr task">
            <span class="title">Basic Attribute</span>
            <div class="task">
                <div>
                    <label>Data Flow</label><span>Test001</span>
                </div>
                <div>
                    <label>Description</label><span>Test001</span>
                </div>
                <div>
                    <label>Status</label><span>Defined</span>
                </div>
                <div>
                    <label>Last Updated By</label><span>sysadmin</span>
                </div>
                <div>
                    <label>Last Updated At</label><span>2016-02-02 14:52:57</span>
                </div>
                <div>
                    <label>Created By</label><span>sysadmin</span>
                </div>
                <div>
                    <label>Creation Time</label><span>2016-02-02 14:49:42</span>
                </div>
                <div>
                    <label>ID</label><span>DATAFLOW145439578244517</span>
                </div>
            </div>
            <div class="extraction">
                <div>
                    <label>Task</label><span>Extract Text</span>
                </div>
                <div>
                    <label>Description</label><span>test001</span>
                </div>
                <div>
                    <label>ID</label><span>HDl1453730597904</span>
                </div>
                <div>
                    <label>File Name</label><span>1</span>
                </div>
                <div>
                    <label>File Path</label><span>/home2/bdi_jl0125gd2</span>
                </div>
                <div>
                    <label>File Encoding</label><span>UFT-8</span>
                </div>
                <div>
                    <label>Search</label><span>No</span>
                </div>
                <div>
                    <label>Generate File</label><span>No</span>
                </div>
            </div>
            <div class="transform">
                <div>
                    <label>Task</label><span>Extract Text</span>
                </div>
                <div>
                    <label>Description</label><span>test001</span>
                </div>
                <div>
                    <label>ID</label><span>Tl1453730597904</span>
                </div>
            </div>
        </div>
        
        <div class="defaultTask1">
        	<div class="nodeItem preset" onmousedown="mousedownHandler(this) " nodetype="extraction" onmouseup="mouseUpHandler()" style="left: 75px;top: 15px;"><div class="nodeIcon icon9"></div><div class="nodeText" style="margin-left: -60px;">Source:BB_SERVICE_RELATION_T</div></div>
        	<div class="nodeItem preset" onmousedown="mousedownHandler(this) " nodetype="transform" onmouseup="mouseUpHandler()" style="left: 330px;top: 15px;"><div class="nodeIcon icon18"></div><div class="nodeText" style="">Convert1</div></div>
        	<div class="nodeItem preset" onmousedown="mousedownHandler(this) " nodetype="extraction" onmouseup="mouseUpHandler()" style="left: 585px;top: 15px;"><div class="nodeIcon icon99"></div><div class="nodeText" style="">td_su_subscriper_d</div></div>
        	<div class="nodeItem preset" onmousedown="mousedownHandler(this) " nodetype="extraction" onmouseup="mouseUpHandler()" style="left: 75px;top: 222px;"><div class="nodeIcon icon9"></div><div class="nodeText" style="margin-left: -60px;">Source:BFC_SERVICE_CREDIT_T</div></div>
            <div class="nodeItem preset" onmousedown="mousedownHandler(this) " nodetype="transform" onmouseup="mouseUpHandler()" style="left: 330px;top: 222px;"><div class="nodeIcon icon18"></div><div class="nodeText" style="">Convert2</div></div>
        </div>
		<!--
        <div class="defaultTask2">
        
        	<div class="nodeItem preset" onmousedown="mousedownHandler(this) " nodetype="extraction" onmouseup="mouseUpHandler()" style="left: 75px;top: 15px;"><div class="nodeIcon icon9"></div><div class="nodeText" style="margin-left: -60px;">Source:BB_SERVICE_RELATION_T</div></div>
        	<div class="nodeItem preset" onmousedown="mousedownHandler(this) " nodetype="transform" onmouseup="mouseUpHandler()" style="left: 330px;top: 15px;"><div class="nodeIcon icon18"></div><div class="nodeText" style="">Convert1</div></div>
        	<div class="nodeItem preset" onmousedown="mousedownHandler(this) " nodetype="extraction" onmouseup="mouseUpHandler()" style="left: 585px;top: 15px;"><div class="nodeIcon icon99"></div><div class="nodeText" style="">Convert1</div></div>
        	<div class="nodeItem preset" onmousedown="mousedownHandler(this) " nodetype="transform" onmouseup="mouseUpHandler()" style="left: 330px;top: 222px;"><div class="nodeIcon icon18"></div><div class="nodeText">Convert1</div></div>
            <div class="nodeItem preset" onmousedown="mousedownHandler(this) " nodetype="extraction" onmouseup="mouseUpHandler()" style="left: 585px;top: 222px;"><div class="nodeIcon icon99"></div><div class="nodeText" style="">Convert1</div></div>
        </div>
		-->
		
        <!--<div class="nodeItem" onMouseDown="mousedownHandler(this)" onMouseUp="mouseUpHandler()">
        	<div class="nodeIcon icon1"></div>
            <div class="nodeText"><span>NSN_007_BALANCEEXPIRY</span></div>
        </div>-->
    </div>
</div>
<div class="footer">
        <div class="container-sys">
            <label class="copyright">
                Copyright © Huawei Technologies Co., Ltd. 1998-2015. All rights
            </label>
            <label class="function">
                <ul>
                    <li>Latest news</li>
                    <li>DOCS</li>
                    <li>Developer service</li>
                    <li>Contact us</li>
                </ul>
            </label>
        </div>
    </div>
</body>
<script src="js/jquery.js"></script>
<script>
var initX=0;initY=0;
var offX=0,
	offY=0,
	alreadyMoving=false,
	zIndex=0,
	obj=null,
	canvas = $(".fullScrn");
	

$(function(){
	/*$(".nodeItem").each(function(){
		this.style.left=initX;
		this.style.top=initY;
		initX+=20;
		initY+=60;
		this.style.position="absolute";
		this.style.zIndex=(++zIndex);
		});	*/
		
		$(".opt-bar .btn4").mousedown(function(){
			cancelBubbles();
			$(".nodeItem.current").remove();
		});
		$(".fullScrn .tool-bar > ul > li li").each(function(i, e) {
            $(e).mousedown(function(){
				mousedownHandler(e,'creat',i)
			});
        });
		
		$(document).bind("mousedown",function(){
			$(".nodeItem.current").removeClass("current");
			$(".basicAttr").attr("class","basicAttr task");
		});
});
function mousedownHandler(o,type,i){
	cancelBubbles();
	if(type && type == "creat"){
		var temNode = $(o).clone().addClass("tempNode");
		$(temNode).bind("mouseup",function(){
			mouseUpHandler('creat',i+1,$(temNode).attr("nodeType"));
		})
		$(temNode).bind("mousedown",function(){
			mousedownHandler(this,'creat',i);
		});
		temNode.appendTo($(o).parent());
		obj=temNode.get(0);
		obj.style.position="absolute";
	}else{
		obj=o;
		var nodeType = $(obj).attr("nodeType");
		$(".basicAttr").attr("class","basicAttr "+nodeType);
	}
	offX=event.clientX - canvas.offset().left - $(obj).width()/2 + $("body").scrollLeft();
	offY=event.clientY - canvas.offset().top - $(obj).height()/2 + $("body").scrollTop();
	if(!obj.style.left){
		obj.style.left=offX + "px";
		obj.style.top=offY + "px";
		obj.style.position="absolute";
	}
	obj.style.zIndex=(++zIndex);
	offX=parseInt(event.clientX)-parseInt(obj.style.left);
	offY=parseInt(event.clientY)-parseInt(obj.style.top);
	if(!$(obj).hasClass("preset")){
		$(document).bind("mousemove",mouseMove);
	}
	obj.style.zIndex=(++zIndex);
	alreadyMoving=true;
	$(".nodeItem.current").removeClass("current");
	$(obj).addClass("current");
}
function mouseUpHandler(type,index,nodeType){
	alreadyMoving=false;
	$(document).unbind("mousemove"); 
	if(type && type == "creat"){
		$(".nodeItem.current").removeClass("current");
		var nodeName = $(".fullScrn .tool-bar > ul > li li").eq(index-1).find("h2").text();
		var left = event.clientX - canvas.offset().left - $(obj).width()/2 + $("body").scrollLeft() + "px",
			top = event.clientY - canvas.offset().top - $(obj).height()/2 + $("body").scrollTop() + "px";
		var newNode = $('<div class="nodeItem current" onMouseDown="mousedownHandler(this) " nodeType="'+nodeType+'"'
			+ 'onMouseUp="mouseUpHandler()" style="left:'+left+';top:'+top+'">'
			+	'<div class="nodeIcon icon'+index+'"></div>'
			+	'<div class="nodeText">'+nodeName+'</div>'
			+'</div>');
		$(".fullScrn").append(newNode);
		var textLeft = (newNode.width() - newNode.find(".nodeText").width()) / 2;
		if(textLeft < 0 ){
			newNode.find(".nodeText").css("margin-left",textLeft);
		}
		$(".tempNode").remove();
		$(".basicAttr").attr("class","basicAttr " + nodeType);
	}
}
function mouseMove(){
	if(alreadyMoving){
		obj.style.left=parseInt(event.clientX)-parseInt(offX) + "px";
		obj.style.top=parseInt(event.clientY)-parseInt(offY) + "px";
	}
}
function cancelBubbles(){
	if (window.event) {
		// this code is for IE 
		event.cancelBubble = true; 
	}else{
		// this code is for Mozilla and Opera 
		event.stopPropagation(); 
	}
}
</script>
<script type="text/javascript" src="../js/headDrop.js"></script>
</html>